<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息表</title>
    <link rel="stylesheet" href="./学生信息表style.css">
</head>
<body>
    <h1>学生信息表——新增学员</h1>
    <form action="" class="first_table">
        姓名：<input type="text" class="name">
        年龄：<input type="text" class="age">
        性别：
        <select name="gender" id="gender">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        薪资：<input type="text" class="salary">
        就业省份：
        <select name="address" id="address">
            <option value="北京">北京</option>
            <option value="天津">天津</option>
            <option value="上海">上海</option>
            <option value="重庆">重庆</option>
            <option value="香港">香港</option>
            <option value="澳门">澳门</option>
            <option value="河北">河北</option>
            <option value="山西">山西</option>
            <option value="辽宁">辽宁</option>
            <option value="吉林">吉林</option>
            <option value="黑龙江">黑龙江</option>
            <option value="江苏">江苏</option>
            <option value="浙江">浙江</option>
            <option value="安徽">安徽</option>
            <option value="福建">福建</option>
            <option value="江西">江西</option>
            <option value="山东">山东</option>
            <option value="河南">河南</option>
            <option value="湖北">湖北</option>
            <option value="湖南">湖南</option>
            <option value="广东">广东</option>
            <option value="海南">海南</option>
            <option value="四川">四川</option>
            <option value="贵州">贵州</option>
            <option value="云南">云南</option>
            <option value="陕西">陕西</option>
            <option value="甘肃">甘肃</option>
            <option value="青海">青海</option>
            <option value="台湾">台湾</option>
            <option value="内蒙古">内蒙古</option>
            <option value="广西">广西</option>
            <option value="西藏">西藏</option>
            <option value="宁夏">宁夏</option>
            <option value="新疆">新疆</option>
        </select>
        <button class="press">录入</button>
    </form>

    <h1> 学生信息表——就业榜</h1>
    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>薪资</th>
                <th>就业省份</th>
                <th>操作</th>
            </tr>
        </thead>
        
           
        <tbody>
            <tr>
                <td>1</td>
                <td>sonder</td>
                <td>19</td>
                <td>男</td>
                <td>15000</td>
                <td>北京</td>
                <td><a href="#">删除</a></td>
            </tr>
        </tbody>
    </table>
   <script>
    //封装函数
    function fn(){
        for(let i=0;i<arr.length;i++){
            tbody.innerHTML=""
            const tr=document.createElement('tr')
            tr.innerHTML=`
                <td>${arr[i].studentId}</td>
                <td>${arr[i].name}</td>
                <td>${arr[i].age}</td>
                <td>${arr[i].gender}</td>
                <td>${arr[i].salary}</td>
                <td>${arr[i].adderss}</td>
                <td><a href="#">删除</a></td>`
            tbody.appendChild(tr)
        }
    }
    //获取对象
    const name=document.querySelector('.name')
    const age=document.querySelector('.age')
    const gender=document.querySelector('.gender')
    const salary=document.querySelector('.salary')
    const adderss=document.querySelector('.address')
    const tbody=document.querySelector('tbody')
    //声明空数组
    const arr=[]
    //给表单添加提交事件
    const form=document.querySelector('.first_table')
    form.addEventListener('submit',function(e){
        //阻止默认事件
        e.preventDefault()
        //创建新的对象
        const obj={
            studentId:arr.length+1,
            name:name.value,
            age:age.value,
            salary:salary.value,
            adderss:adderss.value
        }
        //追加给数组
        arr.push(obj)
        //清空
        form.reset()
        //调用函数，渲染数据
        fn()
    })
    
    //采取委托
    tbody.addEventListener('click',function(e){
        if(e.target.tagName==='a'){
            arr.splice(e.target.dataset.id,1)
            fn()
        }
    })
   </script>
</body>
</html>